<template>
    <div class="detail-dialog-containe dialogHeaderFont">
      <div class="detail-dialog">
        <el-dialog title="产品监控详情"
           :visible.sync="visible"
           @close="$emit('update:showdialog', false)">
          <div class="detail-dialog-content">
            <div class="detail-dialog-item">
              <div class="item-part">
                产品型号：
              </div>
              <div class="item-part setColor" v-text="prodCtrolStateInfo.productCode">
              </div>
            </div>
            <div class="detail-dialog-item">
              <div class="item-part">
                产品名称：
              </div>
              <div class="item-part setColor" v-text="prodCtrolStateInfo.productName">
              </div>
            </div>
            <div class="detail-dialog-item">
              <div class="item-part">
                监控指标：
              </div>
              <div class="item-part setColor" v-text="prodCtrolStateInfo.monitoringIndex">
              </div>
            </div>
            <div class="detail-dialog-item">
              <div class="item-part">
                监控周期：
              </div>
              <div class="item-part setColor" v-text="prodCtrolStateInfo.monitorCycle">
              </div>
            </div>
            <div class="detail-dialog-item">
              <div class="item-part">
                监控异常时段：
              </div>
              <div class="item-part setColor" v-text="prodCtrolStateInfo.monitorTimerange">
              </div>
            </div>
            <div class="detail-dialog-item">
              <div class="item-part">
                指标值：
              </div>
              <div class="item-part setColor" v-text="prodCtrolStateInfo.monitor">
              </div>
            </div>
            <div class="detail-dialog-item">
              <div class="item-part">
                预警值：
              </div>
              <div class="item-part setColor" v-text="prodCtrolStateInfo.indexValue">
              </div>
            </div>
            <div class="detail-dialog-item">
              <div class="item-part">
                预警差值：
              </div>
              <div class="item-part setColor" v-text="prodCtrolStateInfo.dValue">
              </div>
            </div>
            <div class="detail-dialog-item">
              <div class="item-part">
                差值比：
              </div>
              <div class="item-part setColor" v-text="prodCtrolStateInfo.differenceRatio">
              </div>
            </div>
            <div class="detail-dialog-item">
              <div class="item-part">
                预警时间：
              </div>
              <div class="item-part setColor" v-text="prodCtrolStateInfo.monitorTime">
              </div>
            </div>
          </div>
        </el-dialog>
      </div>
    </div>
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
      name: "detail-dialog",
      props: {
        showdialog: {
          type: Boolean,
          default: false
        }
      },
      computed:{
        ...mapGetters(["prodCtrolStateInfo"])
      },
      data() {
          return {
            visible: this.showdialog
          }
      },
      watch: {
        showdialog(){
          this.visible = this.showdialog
        }
      }
  }
</script>

<style scoped>
  /**
    * @desc: This is Note
    * 详情Dialog
    * @author: WJ
    * @date: 2018/09/26 10:49:21
    **/
  .detail-dialog-content{
     background: white;
     padding: 5px 12px;
     border-radius: 4px;
   }
  .detail-dialog-item{
    display: flex;
    height: 30px;
    line-height: 30px;
    align-items: center;
  }
  .setColor{
    font-weight: 600;
  }
</style>
